/*
* 组件名： x-attr-rules
* vue文件路径: attr-rules/index.vue
* 最后更新时间: 2025/9/1 14:42:12
 */
Vue.component('x-attr-rules', {
  template:`
  <div>
    <el-input type="textarea" :rows="5" v-model.lazy="jsonStr" placeholder="请输入json数组校验规则"></el-input>
    <el-button @click="updataRules">确认</el-button>
  </div>
`,
  
  data() {
    return { rules: [],jsonStr: '',isValid: true }
  },
  model: {
    event: 'change'
  },
  watch: {
    jsonStr(val) {
      try {
        const rules = yaml.load(val)
        if (Array.isArray(rules) && rules.length && rules.every(rule => typeof rule === 'object')) {
          this.rules = rules
          this.isValid = true
        } else this.isValid = false
      } catch (err) {
        // console.log('err',err)
        err && this.$message.error(err)
        this.isValid = false
      }

    }
  },
  props: { value: { default() { return [] } } },
  methods: {
    updataRules() {
      if (this.isValid) {
        this.$emit('change',this.rules)
        this.$message.success('rules 已更新')
      } else {
        this.$message.error('请输入正确的校验规则,配置参考 :[ {"required":true,"message":"请输入用户名","trigger":"blur"}]')
      }
    }
  }

  });
/*
* 组件名： x-comp-bar
* vue文件路径: comp-bar/index.vue
* 最后更新时间: 2025/9/1 13:19:03
 */
Vue.component('x-comp-bar', {
  template:`
  <div class="comp-bar" data-v-bca92d9a="">
    <slot></slot>

    <el-collapse :value="collapseArr">
      <el-collapse-item v-for="(part, index) in compBarConfig.parts" :key="part.title" :title="part.title" :name="index">
        <draggable class="comp-bar-part-grid" :sort="part.sortable" :disabled="!part.draggable" :style="comp_bar_part_grid_style" :list="part.formItems" chosen-class="chosen" animation="200" @end="onDragEnd" :group="{ name: 'components', pull: 'clone', put: false }" :clone="cloneItem">
          <div v-for="(item) in part.formItems" :key="item.key" data-v-bca92d9a="">
            <i class="fa" :class="[item.icon]" data-v-bca92d9a=""></i> <span style="padding-left: 2px;" data-v-bca92d9a="">{{ item.title }}</span>
          </div>
        </draggable>
      </el-collapse-item>
    </el-collapse>


  </div>
`,
  
  data() {
    return {
      drag: false
    }
  },
  methods: {
    cloneItem(orginalItem) {
      // console.log('orginalItem',orginalItem)
      // 克隆组件配置时，必须重置key 
      return orginalItem.deepClone()

    },
    onDragEnd(e) {
    },
    formatStyle(formConfig = {}) {
      return {
        gridTemplateColumns: `repeat(${formConfig.cols ?? 1}, 1fr)`,
        rowGap: formConfig.rowGap,
        columnGap: formConfig.columnGap
      }
    }
  },

  computed: {
    collapseArr() {
      return this.compBarConfig.parts.map((_,i) => i)
    },
    comp_bar_part_grid_style() {
      return this.formatStyle(this.compBarConfig)
    }
  },

  mounted() {

  },
  props: {
    compBarConfig: {
      default() {
        return { parts: [] }
      }
    }
  }

  });
/*
* 组件名： x-form-panel
* vue文件路径: form-panel/index.vue
* 最后更新时间: 2025/9/1 15:15:18
 */
Vue.component('x-form-panel', {
  template:`



  <div class="config-panel" @drop="onDrop" :style="{ maxWidth: value.width }" data-v-b04cce3e="">
    <h3 v-if="value.title" v-text="value.title" style="padding-bottom: 20px;" data-v-b04cce3e=""></h3>
    <el-empty v-if="value.emptyText &amp;&amp; !value.formItems?.length" :description="value.emptyText"></el-empty>
    <el-form @submit.native.prevent="" v-else="" :rules="value.rules" :model="value.formDataWithDataKey" ref="form" :label-suffix="value.labelSuffix" :size="value.size" :label-width="value.labelWidth || 'auto'" :label-position="value.labelPosition">
      <draggable :disabled="!value.draggable" :sort="value.sortable" v-model="value.formItems" chosen-class="chosen" animation="200" @add="onAdd" group="components" class="config-panel-grid drop-area" :style="config_panel_grid_style">
        <div v-for="(item) in value.formItems" @click="handleSelectItem(item)" class="config-panel-item" :class="{ setected: value.selectable &amp;&amp; value.selectedItem?.key == item.key, readonly: value.readonly || item.readonly }" :style="setGridSpan(item)" :title="item.helpText" data-v-b04cce3e="">
          <div class="action-bar" data-v-b04cce3e=""><span @click.stop.prevent="removeItem(item)" data-v-b04cce3e="">x</span></div>
          <el-form-item :key="item.key" :label="item.label" :required="item.required" :prop="item.dataKey" :[dynamicrulesprop]="item.rules" :data-hasborder="item.hasBorder">
            <component v-if="item.key.startsWith('attrs.')" v-model="value.formData.attrs[resolveKey(item.key)]" :is="getComp(item)" v-bind="item.attrs">
            </component>
            <component v-else="" v-model="value.formData[item.key]" :is="getComp(item)" v-bind="item.attrs">
            </component>
          </el-form-item>
        </div>

      </draggable>
    </el-form>


  </div>



`,
  

  computed: {
    dynamicrulesprop() {
      return Object.keys(this.value.rules ?? {}).length ? '_never_rules' : 'rules'
    },
    config_panel_grid_style() {
      return {
        gridTemplateColumns: `repeat(${this.value.cols ?? 1}, 1fr)`,
        rowGap: this.value.rowGap ?? 'initial',
        columnGap: this.value.columnGap ?? 'initial'
      }
    }
  },
  mounted() {
    // console.log('this',this) 
  },
  props: {
    value: {
      required: true,
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      comps: {},  //通过generateComponent 生成的组件
      selectedItem: null

    }
  },
  model: {
    event: 'change'
  },
  methods: {
    resolveKey(key) {
      return key.split('.')[1]
    },
    removeItem(item) {
      this.value.formItems = this.value.formItems.filter(i => i.key !== item.key)
      this.handleSelectItem(null)
    },
    setGridSpan(item) {
      return {
        gridColumn: `span ${item.span ?? 1}`
      }
    },
    handleSelectItem(item) {
      if (!this.value.selectable || item == this.value.selectedItem) return
      this.value.selectedItem = item
    },
    onDrop(e) {

    },
    onAdd(e) {
    },
    getComp(item) {
      if (item.compName) return item.compName
      else if (item.templateStr) {
        try {
          return this.generateComponent(item)
        } catch (error) {
          console.error('getComp 出错',error)
        }
      }
    },
    generateComponent(item) {
      const { key,templateStr } = item

      try {
        return this.comps[key] ??= Vue.extend({
          created() {
            // console.log('generateComponent',this)
          },
          props: ['value'],
          model: {
            event: 'change'
          },
          computed: {
            _value: {
              get() { return this.value },
              set(val) {
                this.$emit('change',val)
              }
            }
          },
          template: templateStr
        })

      } catch (error) {
        console.error('generateComponent 出错',error)
      }
    }
  }

  });